<template>
  <div class="news-box">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="news-title" v-for="item in newList" :key="item.id">
        <transition>
          <router-link :to="'/news/detail/'+item.id">
            <van-card
              :title="item.title"
              :thumb="item.img_url"
              :desc="item.add_time|dateFormat"
            />
          </router-link>
        </transition>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newList: [],
      isLoading: false
    }
  },
  created() {
    this.getnewSlist()
  },
  methods: {
    async getnewSlist() {
      const { data: res } = await this.$http.get('/api/getnewslist')
      this.newList = res.message
      console.log(this.newList)
    },
    onRefresh() {
      setTimeout(() => {
        this.$toast('刷新成功')
        this.isLoading = false
      }, 1000)
    }
  }
}
</script>

<style lang="less" scoped>
.news-box {
  .van-card {
    background: #fff;
    border-bottom: 1px solid #eee;
    margin: 0 10px;
    padding: 10px;
    // position: relative;
    .van-card__header {
      .van-card__thumb {
        width: 42px;
        height: 42px;
        .van-image {
          width: 100%;
          height: 100%;
        }
      }
      .van-card__content {
        min-height: 0;
        .van-card__title {
          font-size: 14px;
          font-weight: 700;
          color: #000;
          height: 17px;
        }
        .van-card__desc{
          color: #226aff;
          display: inline;
        }
      }
    }
  }
}
</style>
